@import '../../../core/index.less';
@import '../../../core/iconfont.less';
.orin-w-card-root {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    .card-wrap{
        position: relative;
        border:1px solid #E9E9E9;
        border-radius: 4/@remScale;
        overflow: hidden;
        .card-cover{
            width: 100%;
            height: 0;
            padding-top: 75%;
            position: relative;
            cursor: pointer;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                position: absolute;
                top: 0; 
                left: 0;
                z-index: 0;
            }
            .mask{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: #000;
                opacity: 0;
                transition: opacity 0.5s linear;
                z-index: 0;
                &:hover{
                    @media (min-width: @max1) {
                        opacity: 0.3;
                        transition: opacity 0.5s linear;
                    }
                }
            }
        }
        .card-text-container{
            padding: 4/@remScale 8/@remScale;
            background-color: @white;
            .title{
                width: 100%;
                height: 50/@remScale;
                line-height: 24/@remScale;
                font-size: 14/@remScale;
                font-weight: bold;
                color: @mainTextColor;
                cursor: pointer;
                position: relative;
                .text-overflow(2);
                &:hover{
                    text-decoration: underline;
                }
            }
            .avatar{
                width: 100%;
                height: 40/@remScale;
                line-height: 40/@remScale;
                border-bottom: 1/@remScale solid #F2F2F2;
                display: inline-flex;
                align-items: center;
                img{
                    width: 24/@remScale;
                    height: 24/@remScale;
                    object-fit: cover;
                    cursor: pointer;
                }
                .name{
                    font-size: 13/@remScale;
                    color: @black-hover-auxiliary;
                    margin-left: 6/@remScale;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    cursor: pointer;
                    &:hover{
                        text-decoration: underline;
                    }
                }
    
            }
            .item-info{
                width: 100%;
                height: 34/@remScale;
                line-height: 34/@remScale;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
                svg{
                    width: 20/@remScale;
                    height: 20/@remScale;
                    color: #C0C4CC;
                }
                .left{
                    display: flex;
                    .give-like-wrapper{
                        cursor: pointer;
                        margin-right: 16/@remScale;
                        @media(max-width:320px){
                            margin-right: 4/@remScale;
                        }
                        &:nth-last-child(1){
                            margin-right: 0;
                        }
                        .give-like-btn{
                            //&.collect{
                            //    svg{
                            //        color:#F3AC1E;
                            //    }
                            //}
                            //&.give{
                            //    svg{
                            //        color: @light-blue-color;
                            //    }
                            //}
                            .icon-like {
                                font-size: 10/@remScale;
                                color: #c0c4cc;
                                &.red-color {
                                    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(255,151,152,1)), to(rgba(243, 63, 63, 1)));
                                    -webkit-background-clip: text;
                                    -webkit-text-fill-color: transparent;
                                }
                            }

                        }
                    }
                }
                
                .tag {
                    width:50/@remScale;
                    height: 24/@remScale;
                    line-height: 24/@remScale;
                    text-align: center;
                    font-size: 12/@remScale;
                    color: @light-blue-color;
                    background: #eaf4ff;
                    @media(max-width:@max1){
                        width:42/@remScale;
                        height: 20/@remScale;
                        line-height: 20/@remScale;
                        font-size: 10/@remScale;
                    }
                }
                
                .number{
                    font-size: 12/@remScale;
                    color: #bbb;
                    position: relative;
                    margin-left: 4/@remScale;
                    @media(max-width:320px){
                        margin-left: 0;
                        font-size: 10/@remScale;
                    }

                }
                .view-num-wrapper{
                    height: 24/@remScale;
                    line-height: 24/@remScale;
                    position: absolute;
                    top: 0;
                    right: 5/@remScale;
                    .view-icon{
                        text-shadow: 0 0/@remScale 3/@remScale rgba(0, 0, 0, 0.6);
                        svg{
                            color:rgba(255, 255, 255, 0.8);
                            filter: drop-shadow(0 0/@rem 2/@rem rgba(0, 0, 0, 0.4));
                        }
                    }
                    .number{
                        color:rgba(255, 255, 255, 0.8);
                        text-shadow: 0 0/@remScale 3/@remScale rgba(0, 0, 0, 0.6);
                    }

                }
            }
        }
        
    }

}